<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>广播式WebSocket</title>
    <script th:src="@{js/sockjs.js}"></script>
    <script th:src="@{js/stomp.js}"></script>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p>聊天室</p>
<form id="aricForm">
    <textarea rows="4" cols="60" name="text"></textarea>
    <input type="submit" />
</form>
<div id="output"></div>
</body>
<script type="text/javascript">
    $("#aricForm").submit(function(e){
        e.preventDefault();
        var text = $("#aricForm").find('textarea[name="text"]').val();
        sendSpittle(text);
    });

    var sock = new SockJS("/endpointChat");//连接endpoint名为"endpointChat"的endpoint
    var stomp = Stomp.over(sock);
    stomp.connect('guest','guest',function(frame){
        //订阅/user/queue/notifications发送的消息,这里与在simpMessagingTemplate.convertAndSendToUser定义地址一致,/user是必须的
        stomp.subscribe("/user/queue/notifications",handleNotification);
    });

    function handleNotification(message){
        $("#output").append("<b>Received: " + message.body + "</b><br/>");
    }

    function sendSpittle(text){
        stomp.send("/chat",{},text);
    }

    $("#stop").click(function(){
        sock.close();
    });
</script>
</html>